<template>
  <div style="color: #fff;" class="back fullscreen text-center q-pa-md flex flex-center">
    <div>

      <div class="text-h2 text-white" style="opacity:.5">
        正在跳转，请稍后...
      </div>

      <q-btn
        size="30px"
        class="q-mt-xl"
        color="white"
        text-color="blue"
        unelevated
        to="/"
        :label="int+'秒后跳转！'"
        no-caps
        @click="toInitPage"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'Error404',
  data() {
    return {
      int: 3
    }
  },
  computed: {
    ...mapGetters(['isSuper'])
  },
  mounted() {
    this.setTime = setInterval(() => {
      this.int--
      if (this.int <= 1) {
        this.toInitPage()
        clearInterval(this.setTime)
        this.setTime = null
      }
    }, 1000)
  },
  beforeUnmounted() {
    clearInterval(this.setTime)
    this.setTime = null
  },
  methods: {
    toInitPage() {
      this.$nextTick(() => {
        this.$store.dispatch('login/getVisitMenu', this.isSuper).then(res => {
          let defaultPage
          defaultPage = res[2].url
          this.$router.push({ path: defaultPage })
        })
      })
    }
  }
})
</script>

<style lang='scss' scoped>
.back {
  width: 100vw;
  height: 100vh;
  background: url("../assets/productionE/back.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
</style>
